<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
   ______                  __  __
  / ____/___  __  ______  / /_/ /_  __
 / /   / __ \/ / / / __ \/ __/ / / / /
/ /___/ /_/ / /_/ / / / / /_/ / /_/ /
\____/\____/\__,_/_/ /_/\__/_/\__, /
              http://count.ly/____/
-->
<html>
<head> 
	<title><%- countlyTitle %></title> 
    <script><%- javascript %></script>
	<link rel="icon" type="image/png" href="<%- cdn %>images/favicon.png">
    <script type="text/javascript">
        window.paceOptions = {
            ajax: {
                ignoreURLs: ["action=refresh", "method=live", "stats.count.ly", ".intercom", "method=get_events", "display_loader=false"]
            }
        };
    </script>
    <link rel="stylesheet" href="<%- cdn %>stylesheets/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="<%- cdn %>stylesheets/ionicons/css/ionicons.min.css" />
    <link rel="stylesheet" href="<%- cdn %>stylesheets/material/material-icons.css" />
	<link rel="stylesheet" href="<%- cdn %>javascripts/dom/jqueryui/jquery.ui.base.css" />
	<link rel="stylesheet" href="<%- cdn %>javascripts/dom/jqueryui/jquery.ui.theme.css" />
    <% if (production) { %>
		<link rel="stylesheet" href="<%- cdn %>stylesheets/main.min.css?<%= countlyVersion %>" />
		<link rel="stylesheet" href="<%- cdn %>stylesheets/plugins.min.css?<%= countlyVersion %>" />
    	<!-- PRODUCTION -->
    	<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/min/countly.dom.js?<%= countlyVersion %>"></script>
    	<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/min/countly.utils.js?<%= countlyVersion %>"></script>
    <% } else { %>
		<link rel="stylesheet" href="<%- cdn %>stylesheets/main.css?<%= countlyVersion %>" />
        <link rel="stylesheet" href="<%- cdn %>javascripts/dom/tipsy/tipsy.css" />
        <link rel="stylesheet" href="<%- cdn %>stylesheets/amaranjs/amaran.min.css" />
        <link rel="stylesheet" href="<%- cdn %>javascripts/visualization/rickshaw/rickshaw.min.css" />
        <link rel="stylesheet" href="<%- cdn %>javascripts/dom/pace/pace-theme-flash.css" />
        <link rel="stylesheet" href="<%- cdn %>javascripts/utils/tooltipster/tooltipster.bundle.min.css" />
        <link rel="stylesheet" href="<%- cdn %>javascripts/dom/drop/drop-theme-countly.min.css" />
		<% if (plugins) { %>
			<% for(var i=0, l=plugins.length; i<l; i++) {%>
		<link rel="stylesheet" href="<%- cdn %><%= plugins[i] %>/stylesheets/main.css?<%= countlyVersion %>" />
			<% } %>
		<% } %>
	    <!-- DEVELOPMENT -->
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jquery/jquery-1.8.3.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jquery.form.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/tipsy/jquery.tipsy.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jquery.noisy.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jquery.sticky.headers.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jqueryui/jquery-ui-1.8.22.custom.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jqueryui/jquery-ui-i18n.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/slimScroll.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/jquery.easing.1.3.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/underscore-min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/prefixfree.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/moment/moment-with-locales.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/handlebars.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/backbone-min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.i18n.properties-min-1.0.9.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jstz.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/store+json2.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.idle-timer.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/initialAvatar.js"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.amaran.min.js"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.titlealert.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.hoverIntent.minified.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/tooltipster/tooltipster.bundle.min.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/highlight/highlight.pack.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/dataTables/js/jquery.dataTables.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/dataTables/js/TableTools.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/pace/pace.min.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/drop/tether.min.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/drop/drop.min.js"></script>
    <% } %>
    <% if (themeFiles && themeFiles.css) { %>
        <% for(var i=0, l=themeFiles.css.length; i<l; i++) {%>
    <link href='<%= themeFiles.css[i]%>' rel='stylesheet' type='text/css'>
        <% } %>
    <% } %>
    <script type="text/javascript">
    window.production = <%= production ? true : false %>;
    </script>
</head>
<body>
	<div id="top-bar">
		<div class="logo-container">
			<div class="logo"></div>
		</div>
		<div class="left-menu">
			<div id="app-navigation" class="dropdown bordered large">
				<div class="selected">
					<div id="active-app-icon" style="<% if (defaultApp){ %> background-image:url('<%- cdn %>appimages/<%= defaultApp._id %>.png'); <% } %>"></div>
					<div id="active-app-name"><% if (defaultApp){ %><%= defaultApp.name %><% } %></div>
				</div>
				<div class="empty-state">Apps</div>
				<div class="menu">
					<div class="search nav-search">
						<input type="text" autofocus>
					</div>
					<div class="list"></div>
				</div>
			</div>
		</div>
		<div class="right-menu">
			<div class="dropdown icon">
				<div class="empty-state">
					<i class="ion-person"></i>
				</div>
				<div class="menu right" style="width: 200px;">
					<div class="list">
						<span class="item_info">
							<div class="user_name">
								<div>
									<%= member.full_name %>
								</div>
								<div>
									<%= member.email %>
								</div>
							</div>
							<div class="api_key">
								<div data-localize="sidebar.api_key">
								</div>
								<div id="user_api_key_item">
									<%= member.api_key %>
								</div>
							</div>
						</span>
						<a class="item" href='#/manage/user-settings'>
							<i class="ion-gear-a icon"></i>
							<span data-localize="sidebar.settings"></span>
						</a>
						<% if (!countlyType) { %>
							<% if(intercom && member['global_admin'] || config.autonomous) { %>
							<a class="item activate_intercom">
								<i class="ion-android-textsms icon"></i>
								<span data-localize="common.feedback-and-support"></span>
							</a>
							<% } %>
							<a class="item" href="http://resources.count.ly/" target="_blank">
								<i class="ion-android-document icon"></i>
								<span data-localize="common.documentation"></span>
							</a>
						<% } else { %>
							<% if(intercom && member['global_admin'] || config.autonomous) { %>
							<a class="item activate_intercom">
								<i class="ion-android-textsms icon"></i>
								<span data-localize="common.provide-feedback"></span>
							</a>
							<% } %>
							<a class="item" href="http://community.count.ly/" target="_blank">
								<i class="ion-help-buoy icon"></i>
								<span data-localize="common.support"></span>
							</a>
							<a class="item" href="http://resources.count.ly/" target="_blank">
								<i class="ion-android-document icon"></i>
								<span data-localize="common.documentation"></span>
							</a>
						<% } %>
						<a id="user-logout" class="item" href="<%= path %>/logout">
							<i class="ion-android-exit icon"></i>
							<span data-localize="sidebar.logout"></span>
						</a>
					</div>
				</div>
			</div>
			<div class="dropdown icon">
				<div class="empty-state reveal-language-menu">EN</div>
				<div class="menu right" style="width: 150px;">
					<div id="language-menu" class="list">
						<a data-language-code="de" class="item">Deutsch</a>
						<a data-language-code="et" class="item">Eesti</a>
						<a data-language-code="en" class="item">English</a>
						<a data-language-code="es" class="item">Español</a>
						<a data-language-code="el" class="item">Ελληνικά</a>
						<a data-language-code="fr" class="item">Français</a>
						<a data-language-code="it" class="item">Italiano</a>
						<a data-language-code="lv" class="item">Latviski</a>
						<a data-language-code="hu" class="item">Magyar</a>
						<a data-language-code="nl" class="item">Nederlands</a>
						<a data-language-code="pt" class="item">Português</a>
						<a data-language-code="ru" class="item">Русский язык</a>
						<a data-language-code="vi" class="item">Tiếng Việt</a>
						<a data-language-code="tr" class="item">Türkçe</a>
						<a data-language-code="zh" class="item">中文</a>
						<a data-language-code="ja" class="item">日本語</a>
						<a data-language-code="ko" class="item">한국어</a>
					</div>
				</div>
			</div>
		</div>
		<div style="clear: both"></div>
	</div>

	<div id="main-views-container">
		<div id="dashboards-main-view" class="main-view">
			<div id="custom-dashboard"></div>
		</div>
		<div id="analytics-main-view" class="main-view">
			<div id="sidebar">
				<div id="new-install-overlay"></div>
				<div id="sidebar-menu">
				<div id="default-type" class="sidebar-menu" style="display: none;">
					<a href="#/" class="item analytics">
						<div class="logo dashboard ion-speedometer"></div>
						<div class="text" data-localize="sidebar.dashboard"></div>
					</a>
					<a class="item analytics" id="analytics-menu">
						<div class="logo analytics ion-ios-pulse-strong"></div>
						<div class="text" data-localize="sidebar.analytics"></div>
					</a>
					<div class="sidebar-submenu" id="analytics-submenu">
					</div>
					<a class="item analytics" id="engagement-menu" style="display:none;">
						<div class="logo ion-happy-outline"></div>
						<div class="text" data-localize="sidebar.engagement"></div>
					</a>
					<div class="sidebar-submenu" id="engagement-submenu">
					</div>
					<a href="#/analytics/events" class="item analytics" id="sidebar-events">
						<div class="logo events">
							<i class="material-icons">bubble_chart</i>
						</div>
						<div class="text" data-localize="sidebar.events"></div>
					</a>
					<% if(member['global_admin'] || adminOfApps.length  || config.autonomous) { %>
					<a class="item" id="management-menu">
						<div class="logo management ion-gear-a"></div>
						<div class="text" data-localize="sidebar.management"></div>
					</a>
					<div class="sidebar-submenu" id="management-submenu">
						<a href="#/manage/apps" class="item active">
							<div class="logo applications"></div>
							<div class="text" data-localize="sidebar.management.applications"></div>
						</a>
						<% if(member['global_admin']) { %>
						<a href="#/manage/users" class="item">
							<div class="logo mgmt-users"></div>
							<div class="text" data-localize="sidebar.management.users"></div>
						</a>
						<% } %>
						<a href="#/manage/tasks" class="item">
							<div class="logo applications"></div>
							<div class="text" data-localize="sidebar.management.longtasks"></div>
						</a>
						<a class="item help-toggle">
							<div class="logo help"></div>
							<div class="text" data-localize="sidebar.management.help"></div>
							<div id="help-toggle"></div>
						</a>
					</div>
					<% } %>
				</div>
			</div>
				<div id="version-info"><%= countlyTypeName %></div>
			</div>
			<div id="content-container">
				<div id="content-top"></div>
				<div id="content"></div>
			</div>
		</div>
	</div>

	<div id="overlay"></div>
    <div id="cly-resource" class="dialog black" style="max-width: 800px; max-height: 600px;">
        <div class="content"></div>
    </div>
	<div id="cly-popup" class="dialog black">
		<div class="indicator"></div>
		<div class="content"></div>
	</div>
	<div id="cly-loading" class="dialog black"> 
 		<div class="indicator"></div> 
 		<div class="message"></div> 
 		<div class="content"> 
 			<div class="loading-bars"> </div>
 		</div> 
 	</div> 
	<div id="cly-alert" class="dialog">
		<div class="indicator"></div>
		<div class="message"></div>
		<div class="buttons">
				<a id="dialog-ok" class="icon-button light" data-localize="common.ok"></a>
		</div>
	</div>
	<div id="cly-confirm" class="dialog">
		<div class="indicator"></div>
		<div class="message"></div>
		<div class="buttons">
				<a id="dialog-continue" class="icon-button light" data-localize="common.continue"></a>
				<a id="dialog-cancel" class="icon-button light" data-localize="common.cancel"></a>
		</div>
	</div>
    <div id="cly-export" class="dialog export-dialog">
		<p data-localize="export.export-as"></p>
        <div id="export-type-selector" class="button-selector light">
            <div class="button selected active" id="export-csv">.CSV</div>
			<div class="button" id="export-xls">.XLS</div>
			<div class="button" id="export-json">.JSON</div>
        </div>
        <p class="details" data-localize="export.export-number"></p>
        <div class="cly-select">
            <div class="select-inner">
                <div class="text-container">
                    <div class="text" data-localize="export.select"></div>
                </div>
                <div class="right combo"></div>
            </div>
            <div class="select-items square">
                <div></div>
            </div>
        </div>
        <div class="icon-button green export-data" data-localize="export.export"></div>
	</div>
	<div id="edit-account-details">
		<div class="message">
			<div>
				<div class="title" data-localize="user-settings.username"></div>
				<div class="input"><input id="username" type="text" value=""/></div>
			</div>
			<div style="margin-top:15px;">
				<div class="title" data-localize="user-settings.change-password"></div>
				<div class="input">
					<div><input id="old_pwd" type="password" placeholder="Old password..." data-localize="placeholder.old-password"/></div>
					<div style="margin-top:10px;"><input id="new_pwd" type="password" placeholder="New password..." data-localize="placeholder.new-password"/></div>
					<div style="margin-top:5px;"><input id="re_new_pwd" type="password" placeholder="Again..." data-localize="placeholder.again"/></div>
				</div>
			</div>
			<div style="margin-top:15px;">
				<div class="title" data-localize="user-settings.api-key"></div>
				<div class="input"><input id="api-key" type="text" value=""/></div>
			</div>
		</div>
		<div class="buttons">
			<div id="settings-save-result" class="result-message"></div>
			<a id="save-account-details" class="icon-button light" data-localize="common.save"></a>
			<a id="dialog-cancel" class="icon-button light" data-localize="common.close"></a>
		</div>
	</div>
    <div id="graph-note-popup">
        <div class="note-popup">
            <div class="message">
                <div class="note-create">
                    <div>
                        <div class="title" data-localize="">Note</div>
                        <div class="input" style="height:42px; text-align: center"><input class="note-content" style="width:260px;" type="text" value=""/></div>
                    </div>
                    <div style="margin-top:20px; overflow: auto; height:225px;">
                        <div style="float:left; position: relative;">
                            <div style="position: relative;">
                                <div class="calendar-container">
                                    <div class="note-date calendar-light" class="calendar" style="border: 1px solid #FFF; border-radius: 5px;"></div>
                                </div>
                            </div>
                        </div>
                        <div style="height: 155px; overflow:hidden; width:65px; border: 1px solid #CCC; border-radius: 2px; float:right; margin-top: 54px;">
                            <div class="time-picker" class="calendar-container" style="overflow:hidden;">
                                <span class="selected">00:00</span>
                                <span>01:00</span>
                                <span>02:00</span>
                                <span>03:00</span>
                                <span>04:00</span>
                                <span>05:00</span>
                                <span>06:00</span>
                                <span>07:00</span>
                                <span>08:00</span>
                                <span>09:00</span>
                                <span>10:00</span>
                                <span>11:00</span>
                                <span>12:00</span>
                                <span>13:00</span>
                                <span>14:00</span>
                                <span>15:00</span>
                                <span>16:00</span>
                                <span>17:00</span>
                                <span>18:00</span>
                                <span>19:00</span>
                                <span>20:00</span>
                                <span>21:00</span>
                                <span>22:00</span>
                                <span>23:00</span>
                            </div>
                        </div>
                    </div>
                    <div class="selected-date" style="display:none; margin-top:5px; font-family:Ubuntu; font-size:15px; color:#999; font-style: italic; text-align: center; height:20px;">

                    </div>
                </div>
                <div class="note-manage" style="display:none;">
                    <div style="height:311px;">
                        <div class="note-list" style="overflow:hidden;"></div>
                    </div>
                </div>
            </div>
            <div class="buttons">
                <div class="manage-notes-button popup-link">Manage notes</div>
                <div class="create-note-button popup-link" style="display:none;">Back</div>
                <div id="" class="result-message"></div>
                <a class="create-note icon-button light" data-localize="common.create"></a>
                <a id="dialog-cancel" class="icon-button light" data-localize="common.close"></a>
            </div>
        </div>
    </div>

    <script id="template-date-selector" type="text/x-handlebars-template">
		<div id="date-selector" class="help-zone-vs">
            <div class="date-buttons-container">
                <div class="button date-selector" id="month"></div>
                <div class="button date-selector" id="day"></div>
                <div class="button date-selector" id="yesterday"></div>
                <div class="button date-selector" id="hour" data-localize="common.today"></div>
                <div class="button date-selector" id="7days" data-localize="common.7days"></div>
                <div class="button date-selector" id="30days" data-localize="common.30days"></div>
                <div class="button date-selector" id="60days" data-localize="common.60days"></div>
                <!--<div class="button date-selector" id="90days" data-localize="common.90days"></div>-->
            </div>
            <div class="calendar" id="date-picker-button">
                <i class="material-icons">date_range</i>
            </div>
			<div id="date-picker">
				<div class="calendar-container">
					<div id="date-from" class="calendar"></div>
					<div id="date-to" class="calendar"></div>
				</div>
				<div class="button-container">
					<div id="date-submit" class="icon-button green" data-localize="common.apply"></div>
					<div id="selected-date"></div>
				</div>
			</div>
		</div>
	</script>

	<script id="template-app-categories" type="text/x-handlebars-template">
		<div data-value="1" class="item" data-localize="application-category.books"></div>
		<div data-value="2" class="item" data-localize="application-category.business"></div>
		<div data-value="3" class="item" data-localize="application-category.education"></div>
		<div data-value="4" class="item" data-localize="application-category.entertainment"></div>
		<div data-value="5" class="item" data-localize="application-category.finance"></div>
		<div data-value="6" class="item" data-localize="application-category.games"></div>
		<div data-value="7" class="item" data-localize="application-category.health-fitness"></div>
		<div data-value="8" class="item" data-localize="application-category.lifestyle"></div>
		<div data-value="9" class="item" data-localize="application-category.medical"></div>
		<div data-value="10" class="item" data-localize="application-category.music"></div>
		<div data-value="11" class="item" data-localize="application-category.navigation"></div>
		<div data-value="12" class="item" data-localize="application-category.news"></div>
		<div data-value="13" class="item" data-localize="application-category.photography"></div>
		<div data-value="14" class="item" data-localize="application-category.productivity"></div>
		<div data-value="15" class="item" data-localize="application-category.reference"></div>
		<div data-value="16" class="item" data-localize="application-category.social-networking"></div>
		<div data-value="17" class="item" data-localize="application-category.sports"></div>
		<div data-value="18" class="item" data-localize="application-category.travel"></div>
		<div data-value="19" class="item" data-localize="application-category.utilities"></div>
		<div data-value="20" class="item" data-localize="application-category.weather"></div>
	</script>

	<script id="template-analytics-common"  type="text/x-handlebars-template">
		<div class="widget">
			<div class="widget-header">
				<div class="left">
					<div class="title">{{page-title}}</div>     
				</div>
				{{> date-selector }}
			</div>
            {{#if graph-description}}
            <div class="graph-description">{{graph-description}}</div>
            {{/if}}
            <div class="widget-content help-zone-vb" data-help-localize="help.{{{chart-helper}}}" style="{{#if graph-type-double-pie}} overflow:hidden; {{else}} {{#if chartHTML}}  {{else}} height:300px; padding-top:35px; padding-bottom:10px; {{/if}}{{/if}}">
				{{#if graph-type-double-pie}}
				<div class="pie-chart-container">
					<div style="border-right:1px solid #CCC; width: 100%; height: 100%">
						<div class="pie-overlay one {{logo-class}}">
                            <div class="logo ion ion-person-stalker"></div>
							<div class="title">{{pie-titles.left}}</div>
						</div>
						<div id="dashboard-graph" class="graph" style="margin:0 auto !important; height:360px; font-family:'Ubuntu';"></div>
					</div>
				</div>
				<div class="pie-chart-container">
					<div class="pie-overlay two {{logo-class}}">
                        <div class="logo ion ion-person-add"></div>
						<div class="title">{{pie-titles.right}}</div>
					</div>
					<div id="dashboard-graph2" class="graph" style="margin:0 auto !important; height:360px; font-family:'Ubuntu';"></div>
				</div>
				{{else}}
                    {{#if chartHTML}}
                        {{{chartHTML}}}
                    {{else}}
                    <div id="dashboard-graph" class="graph" style="height:100%; margin-left:-10px; {{#if isChartEmpty}} display:none; {{/if}}"></div>
                    <div class="graph-no-data" {{#if isChartEmpty}} style="display:block;" {{/if}}>
                        <div class="inner">
                            <div class="icon"></div>
                            <div class="text" data-localize="common.graph.no-data"></div>
                        </div>
                    </div>
                    {{/if}}
				{{/if}}
			</div>
			{{#if big-numbers}}
			<div class="widget-footer big-numbers-v2">
				<div id="big-numbers-container">
					{{#each big-numbers.items}}
					<div class="big-numbers {{#if ../../big-numbers.class}}{{../../big-numbers.class}}{{else}}three-column{{/if}} help-zone-vs" data-help-localize="help.{{this.help}}">
						<div class="inner">
                            <div class="color"></div>
							<div class="select">{{this.title}}</div>
							<div class="number">{{getFormattedNumber this.total}}</div>
                            <div class="trend {{this.trend}}">
                                {{#ifCond this.trend "==" "u"}}
                                <i class="material-icons">trending_up</i>
                                {{else}}
                                <i class="material-icons">trending_down</i>
                                {{/ifCond}}
                            </div>
                        </div>
					</div>
					{{/each}}
				</div>
			</div>
			{{/if}}
		</div>
		{{#if bars}}
		<div class="dashboard-summary {{#if bars-class}}{{bars-class}}{{else}}three{{/if}}">
			{{#each bars}}
			<div class="item help-zone-vs" data-help-localize="help.{{this.help}}">
				<div class="inner">
					<div class="title">{{this.title}}</div>
					{{#if this.data}}
					<div class="bar">
						{{#each this.data}}
							<div class="bar-inner" style="width:{{this.percent}}%;" data-item="{{this.name}}"></div>
						{{/each}}
					</div>
					<div class="number" data-item="{{this.data.0.name}}">{{this.data.0.name}}</div>
					{{else}}
					<div class="no-data" data-localize="common.bar.no-data"></div>
					{{/if}}
				</div>
			</div>
			{{/each}}
		</div>
		{{/if}}
        <table id="dataTableOne" class="d-table help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
        {{#if two-tables}}
            {{#if segmentation}}
            <div class="widget segmentation-widget">
                <div class="widget-header">
                    <div class="left">
                        <div class="title small">{{segment-title}}</div>
                        <div>
                            <div class="cly-select float">
                                <div class="select-inner">
                                    <div class="text-container">
                                        <div class="text">{{active-segment}}</div>
                                    </div>
                                    <div class="right combo"></div>
                                </div>
                                <div class="select-items square" style="width:220px;">
                                    <div>
                                        {{#eachOfArray segmentation}}
                                        <div data-value="{{value.value}}" class="segmentation-option item">{{value.name}}</div>
                                        {{/eachOfArray}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="segmentation-table">
                <table id="dataTableTwo" class="d-table help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
            </div>
            {{else}}
            <table id="dataTableTwo" class="d-table help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
            {{/if}}
        {{/if}}
	</script>

	<script id="template-analytics-countries"  type="text/x-handlebars-template">
		<div class="widget">
			<div class="widget-header">
				<div class="left">
					<div class="title">{{page-title}}</div>
				</div>
				{{> date-selector }}
                <div class="right">
                    <a id='country-toggle' class='icon-button light btn-header'></a>
                </div>
			</div>
			<div class="widget-content help-zone-vb" data-help-localize="help.{{{chart-helper}}}" style="height:480px;">
				<div id="geo-chart-outer" class="big"><div><div id="geo-chart"></div></div></div>
			</div>
			<div class="widget-footer big-numbers-v2 geo-switch">
                {{#if big-numbers}}
				<div id="big-numbers-container">
					{{#each big-numbers.items}}
					<div data-id="{{this.radio-button-id}}" class="big-numbers radio {{#if ../../big-numbers.class}}{{../../big-numbers.class}}{{else}}three-column{{/if}} help-zone-vs {{this.radio-button-class}}" data-help-localize="help.{{this.help}}">
						<div class="inner">
                            <div class="color"></div>
							<div class="select">{{this.title}}</div>
							<div class="number">{{getFormattedNumber this.total}}</div>
                            <div class="trend {{this.trend}}">
                                {{#ifCond this.trend "==" "u"}}
                                <i class="material-icons">trending_up</i>
                                {{else}}
                                <i class="material-icons">trending_down</i>
                                {{/ifCond}}
                            </div>
						</div>
					</div>
					{{/each}}
				</div>
                {{/if}} 
			</div>
		</div>
		<table class="d-table help-zone-vb" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
	</script>

	<script id="template-management-applications" type="text/x-handlebars-template">
		<div id="app-management-bar">
			<div id="app-nav-head">
				<div id="app-nav-title" data-localize="management-applications.title"></div>
				<% if(member['global_admin'] || config.autonomous) { %>
				<div style="overflow:hidden; position:absolute; top:14px; right:10px;">
                    <div class="icon-button help-zone-vs" data-help-localize="help.manage-apps.app-add-button" id="add-app-button">
                        <i class="fa fa-plus-circle"></i>
                    </div>
				</div>
				<% } %>
			</div>
            <div class="nav-search">
                <i class="fa fa-search"></i>
                <input type="text">
            </div>
			<div id="management-app-container" class="scrollable">
				{{#eachOfObjectValue admin_apps}}
				<div class="app-container searchable" data-key="{{this.key}}" data-id="{{this._id}}">
					<div class="logo" style="background-image: url('<%- cdn %>appimages/{{this._id}}.png');"></div>
					<div class="name">{{this.name}}</div>
				</div>
				{{/eachOfObjectValue}}
			</div>
			<div id="manage-new-app">
				<div class="app-container">
					<div class="logo"></div>
					<div class="name" data-localize="management-applications.my-new-app"></div>
				</div>
			</div>
		</div>
		<div class="widget" style="margin-left:199px;">
			<div id="add-new-app">
				<div class="widget-header">
					<div class="left">
						<div class="title new-app-name" data-localize="management-applications.my-new-app"></div>
					</div>
				</div>
				<div>
					<table class="d-table horizontal" cellpadding="0" cellspacing="0">
						<tbody>
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-name">
								<td data-localize="management-applications.application-name"></td>
								<td>
									<input type="text" value="" placeholder="Enter application name..." data-localize="placeholder.app-name" id="app-add-name">
								</td>
							</tr>
                            <tr class="help-zone-vs" data-help-localize="help.manage-apps.app-type">
								<td data-localize="management-applications.type"></td>
								<td>
									<div class="cly-select select-app-types" style="width:283px;">
										<div class="select-inner">
											<div class="text-container">
												<div class="text" id="app-add-type" data-localize="management-applications.type.tip"></div>
											</div>
											<div class="right combo"></div>
										</div>
										<div class="select-items square" style="width:283px;">
											<div>
												{{#eachOfObject app_types}}
                                                    <div data-value="{{property}}" class="item">{{value}}</div>
                                                {{/eachOfObject}}
											</div>
										</div>
									</div>
                                    <div class="hint" data-localize="management-applications.type.hint"></div>
                                </td>
							</tr>
							<!--<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-category">
								<td data-localize="management-applications.category"></td>
								<td>
									<div class="cly-select" style="width:280px;">
										<div class="select-inner">
											<div class="text-container">
												<div class="text" id="app-add-category" data-localize="management-applications.category.tip"></div>
											</div>
											<div class="right combo"></div>
										</div>
										<div class="select-items square" style="width:280px;">
											<div>
												{{> app-categories }}
											</div>
										</div>
									</div>
								</td>
							</tr>-->
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-timezone">
								<td data-localize="management-applications.time-zone"></td>
								<td id="app-add-timezone" >
                                    <div>
                                        <div style="float:left;">
                                            <div id="country-select" class="cly-select" style="width:283px;">
                                                <div class="select-inner">
                                                    <div class="text-container">
                                                        <div class="text"></div>
                                                    </div>
                                                    <div class="right combo"></div>
                                                </div>
                                                <div class="select-items square" style="width:283px;">
                                                    <div id="country-items"></div>
                                                </div>
                                            </div>
                                            <div id="timezone-select" class="cly-select" style="width:200px; display:none;">
                                                <div class="select-inner">
                                                    <div class="text-container">
                                                        <div class="text"></div>
                                                    </div>
                                                    <div class="right combo"></div>
                                                </div>
                                                <div class="select-items square" style="width:200px;">
                                                    <div id="timezone-items"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="selected" style="float:left; font-size:14px; padding:8px 10px 5px; color:#666;"></div>
                                        <input type="hidden" value="" id="app-timezone"/>
                                        <input type="hidden" value="" id="app-country"/>
                                    </div>
                                    <div class="hint" data-localize="management-applications.time-zone.hint"></div>
                                </td>
							</tr>
                            <tr class="help-zone-vs" data-help-localize="help.manage-apps.app-icon">
								<td data-localize="management-applications.icon"></td>
								<td>
									<form action="/apps/icon" enctype="multipart/form-data" id="add-app-image-form" method="post">
										<input type="file" id="app_image" name="app_image" />
										<input type="hidden" id="app_image_id" name="app_image_id" />
									</form>
								</td>
							</tr>
							<tr class="table-add">
								<td colspan="2">
									<a id="save-app-add" class="icon-button light" data-localize="management-applications.add-application"></a>
									<a id="cancel-app-add" class="icon-button light" data-localize="common.cancel"></a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="view-app">
				<div class="widget-header">
					<div class="left">
						<div class="title"></div>
					</div>
					<div style="float:right; min-width:260px; overflow:hidden; margin-top:6px;">
                        <div style="float:right;" class="icon-button light help-zone-vs" data-help-localize="help.manage-apps.app-edit-button" id="edit-app" data-localize="common.edit"></div>
						<div style="float:right;" class="icon-button delete-app help-zone-vs" data-help-localize="help.manage-apps.app-clear-button" id="clear-app-data">
                            <span data-localize="management-applications.clear-data"></span>
                            <span class="down ion-chevron-down"></span>
                            <span class="up ion-chevron-up"></span>
						</div>
						<div style="display:none; float:right;" class="icon-button delete-app help-zone-vs" data-help-localize="help.manage-apps.app-delete-button" id="delete-app" data-localize="common.delete"></div>
                        <ul id="clear-data" class="options">
                            <li id="clear-all"><span data-localize="management-applications.clear-all-data"></span></li>
                            <li id="clear-1month"><span data-localize="management-applications.clear-1month-data"></span></li>
                            <li id="clear-3month"><span data-localize="management-applications.clear-3month-data"></span></li>
                            <li id="clear-6month"><span data-localize="management-applications.clear-6month-data"></span></li>
                            <li id="clear-1year"><span data-localize="management-applications.clear-1year-data"></span></li>
                            <li id="clear-2year"><span data-localize="management-applications.clear-2year-data"></span></li>
                        </ul>
					</div>
				</div>
				<div class="app-details">
					<input type="hidden" id="app-edit-id"/>
					<table class="d-table horizontal" cellpadding="0" cellspacing="0">
						<tbody>
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-name">
								<td data-localize="management-applications.application-name"></td>
								<td id="app-edit-name">
									<div class="read"><span></span><a id="app_details" data-localize="management-applications.application-details"></a></div>
									<div class="edit">
										<input type="text" value="">
									</div>
								</td>
							</tr>
                            <tr class="help-zone-vs" data-help-localize="help.manage-apps.app-type">
								<td data-localize="management-applications.type"></td>
								<td id="app-edit-type">
									<div class="read"></div>
									<div class="edit">
										<div class="cly-select select-app-types">
											<div class="select-inner">
												<div class="text-container">
													<div class="text"></div>
												</div>
												<div class="right combo"></div>
											</div>
											<div class="select-items square">
												<div>
													{{#eachOfObject app_types}}
                                                        <div data-value="{{property}}" class="item">{{value}}</div>
                                                    {{/eachOfObject}}
												</div>
											</div>
										</div>
									</div>
                                    <div class="hint" data-localize="management-applications.type.hint"></div>
								</td>
							</tr>
							<!--<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-category">
								<td data-localize="management-applications.category"></td>
								<td id="app-edit-category">
									<div class="read"></div>
									<div class="edit">
										<div class="cly-select">
											<div class="select-inner">
												<div class="text-container">
													<div class="text"></div>
												</div>
												<div class="right combo"></div>
											</div>
											<div class="select-items square">
												<div>
													{{> app-categories }}
												</div>
											</div>
										</div>
									</div>
								</td>
							</tr>-->
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-key">
								<td data-localize="management-applications.app-key"></td>
								<td id="app-edit-key">
									<div class="read"></div>
									<div class="edit">
										<input type="text" value="">
									</div>
                                    <div class="hint" data-localize="management-applications.app-key.hint"></div>
                                </td>
							</tr>
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-timezone">
								<td data-localize="management-applications.time-zone"></td>
								<td id="app-edit-timezone">
									<div class="read">
											<div class="flag"></div>
											<div class="country"></div>
											<div class="timezone"></div>
									</div>
									<div class="edit">
										<div style="float:left;">
											<div id="country-select" class="cly-select" style="width:283px;">
												<div class="select-inner">
													<div class="text-container">
														<div class="text"></div>
													</div>
													<div class="right combo"></div>
												</div>
												<div class="select-items square" style="width:283px;">
													<div id="country-items"></div>
												</div>
											</div>
											<div id="timezone-select" class="cly-select" style="width:200px; display:none;">
												<div class="select-inner">
													<div class="text-container">
														<div class="text"></div>
													</div>
													<div class="right combo"></div>
												</div>
												<div class="select-items square" style="width:200px;">
													<div id="timezone-items">

													</div>
												</div>
											</div>
										</div>
										<div id="selected" style="float:left; font-size:14px; padding:8px 10px 5px; color:#666;"></div>
										<input type="hidden" value="" id="app-timezone"/>
										<input type="hidden" value="" id="app-country"/>
									</div>
                                    <div class="hint" data-localize="management-applications.time-zone.hint"></div>
                                </td>
							</tr>
							<tr class="help-zone-vs" data-help-localize="help.manage-apps.app-icon">
								<td data-localize="management-applications.icon"></td>
								<td id="app-edit-image">
									<div class="read">
										<div class="logo"></div>
									</div>
									<div class="edit">
										<form action="/apps/icon" enctype="multipart/form-data" id="add-edit-image-form" method="post">
											<input type="file" id="app_image" name="app_image" />
											<input type="hidden" id="app_image_id" name="app_image_id" />
										</form>
									</div>
								</td>
							</tr>
                            <tr class="help-zone-vs" data-help-localize="help.manage-apps.checksum-salt">
								<td data-localize="management-applications.checksum-salt"></td>
								<td id="app-edit-salt">
									<div class="read"></div>
									<div class="edit">
										<input type="text" value="">
									</div>
                                    <div class="hint" data-localize="management-applications.checksum-salt.hint"></div>
								</td>
							</tr>
                            <tr class="help-zone-vs" data-help-localize="help.manage-apps.app-id">
                                <td data-localize="management-applications.app-id"></td>
                                <td>
                                    <div id="view-app-id"></div>
                                    <div class="hint" data-localize="management-applications.app-id.hint"></div>
                                </td>
                            </tr>
							<tr class="table-edit">
								<td colspan="2">
									<a id="save-app-edit" class="icon-button green" data-localize="common.save-changes"></a>
									<a id="cancel-app-edit" class="icon-button light" data-localize="common.cancel"></a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			</div>
            <div id="code-countly" style="display: none;">
                <div id="code-countly-logo"></div>
                <div id="code-countly-content">
                    <h3 data-localize="common.integrate-sdks"></h3>
                    <p data-localize="common.integrate-sdks-text"></p>
                    <p class="select-platforms" data-localize="common.integrate-sdks-platforms"></p>
                    <div class="sdks"></div>
                </div>
			</div>
			<div id="no-app-warning" class="alert danger" data-localize="management-applications.no-app-warning"></div>
			<div id="first-app-success" class="alert success" data-localize="management-applications.first-app-message2"></div>
		</div>
	</script>

	<script id="template-events"  type="text/x-handlebars-template">
		<div id="event-nav">
			<div id="event-nav-head">
				<div id="event-nav-title" style="max-width: 120px;" data-localize="events.title"></div>
				<div style="overflow:hidden; position:absolute; top:14px; right:10px;">
					<div class="icon-button help-zone-vs" id="edit-events-button" style="<% if(!member['global_admin']) { %> display:none; <% } %>">
                        <i class="ion-gear-a"></i>
					</div>
				</div>
			</div>
            <div class="nav-search">
                <i class="fa fa-search"></i>
                <input type="text" />
            </div>
			<div class="scrollable" style="max-height:450px;">
				{{#eachOfArray events}}
				<div class="searchable event-container {{#if value.is_active}}active{{/if}}" data-key="{{value.key}}">
					<div class="name">{{value.name}}</div>
				</div>
				{{/eachOfArray}}
			</div>
		</div>
		<div id="edit-event-container" style="display:none;">
			<div id="edit-event-table-container">
                <table class="events-table" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th></th>
                        <th style="text-align:center;"><i class="fa fa-trash delete-event-selected"></i></th>
                        <th></th>
                        <th data-localize="events.edit.event-key"></th>
                        <th data-localize="events.edit.event-name"></th>
                        <th data-localize="events.table.count"></th>
                        <th data-localize="events.table.sum"></th>
                        <th data-localize="events.table.dur"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {{#eachOfObjectValue event-map}}
                    <tr>
                        <td style="text-align:center;"><i class="fa fa-reorder event-order"></i></td>
                        <td style="text-align:center;"><input type="checkbox" class="delete-event-check" data-event-key="{{this.key}}"/></td>
                        <td style="text-align:center;"><i class="fa fa-trash delete-event" data-event-key="{{this.key}}"></i></td>
                        <td class="event-key">{{this.key}}</td>
                        <td><input class="event-name" type="text" placeholder="Event name"  data-localize="events.edit.event-name" value="{{this.name}}"/></td>
                        <td><input class="event-count" type="text" placeholder="Count" data-localize="events.table.count" value="{{this.count}}"/></td>
                        <td><input class="event-sum" type="text" placeholder="Sum" data-localize="events.table.sum" value="{{this.sum}}"/></td>
                        <td><input class="event-dur" type="text" placeholder="Duration" data-localize="events.table.dur" value="{{this.dur}}"/></td>
                    </tr>
                    {{/eachOfObjectValue}}
                    </tbody>
                </table>
			</div>
			<div class="buttons">
				<div id="settings-save-result" class="result-message"></div>
				<a id="events-save" class="icon-button green" data-localize="common.save"></a>
				<a id="dialog-cancel" class="icon-button light" data-localize="common.close"></a>
			</div>
		</div>
		<div id="event-main" style="margin-left:199px;">
		<div class="widget">
			<div class="widget-header">
				<div class="left">
					<div id="event-update-area">
                        {{#if segmentations}}
						<div class="title dynamic-title small">{{page-title}}</div>
                        {{else}}
                        <div class="title dynamic-title">{{page-title}}</div>
                        {{/if}}
						<div class="event-segmentation">
							{{#if segmentations}}
							<div class="cly-select float">
								<div class="select-inner">
									<div class="text-container">
										<div class="text">{{active-segmentation}}</div>
									</div>
									<div class="right combo"></div>
								</div>
								<div class="select-items square" style="width:220px;">
									<div>
										<div data-value="" class="segmentation-option item" data-localize="events.no-segmentation"></div>
										{{#eachOfArray segmentations}}
										<div data-value="{{value}}" class="segmentation-option item">{{value}}</div>
										{{/eachOfArray}}
									</div>
								</div>
							</div>
							{{/if}}
						</div>
					</div>
				</div>
                {{> date-selector }}
			</div>
			<div class="widget-content" style="{{#if graph-type-double-pie}} overflow:hidden; {{else}} height:300px; padding-top:20px; padding-bottom:10px; {{/if}}">
				{{#if graph-type-double-pie}}
				<div class="pie-chart-container">
					<div style="border-right:1px solid #CCC; width: 100%; height: 100%">
						<div class="pie-overlay one {{logo-class}}"></div>
						<div id="dashboard-graph" class="graph" style="margin:0 auto; height:360px; font-family:'Ubuntu';"></div>	
					</div>
				</div>
				<div class="pie-chart-container">
					<div class="graph-segment-container">
					{{#if graph-segmentation}}
						<div class="graph-segment {{graph-segmentation.class}}" data-name="{{graph-segmentation.name}}"></div>
					{{/if}}
					</div>
					<div class="pie-overlay two {{logo-class}}"></div>
					<div id="dashboard-graph2" class="graph" style="margin:0 auto; height:360px; font-family:'Ubuntu';"></div>
				</div>
				{{else}}
				<div id="dashboard-graph" class="graph" style="height:100%; margin-left:-10px;"></div>
				{{/if}}
			</div>
			{{#if big-numbers}}
			<div class="widget-footer event-numbers big-numbers-v2">
				<div id="big-numbers-container" class="{{big-numbers.class}} event-numbers">
					{{#each big-numbers.items}}
					<div class="big-numbers selected check {{this.class}}" data-type="{{this.class}}">
						<div class="inner">
                            <div class="color"></div>
							<div class="select">{{this.title}}</div>
							<div class="number">{{getFormattedNumber this.total}}</div>
                            <div class="trend {{this.trend}}">
                                {{#ifCond this.trend "==" "u"}}
                                <i class="material-icons">trending_up</i>
                                {{else}}
                                <i class="material-icons">trending_down</i>
                                {{/ifCond}}
                            </div>
						</div>
					</div>
					{{/each}}
				</div>
			</div>
			{{/if}}
		</div>
		{{#if bars}}
		<div class="dashboard-summary three">
			{{#each bars}}
			<div class="item">
				<div class="inner">
					<div class="title">{{this.title}}</div>
					{{#if this.data}}
					<div class="bar">
						{{#each this.data}}
							<div class="bar-inner" style="width:{{this.percent}}%;" data-item="{{this.name}}"></div>
						{{/each}}
					</div>
					<div class="number" data-item="{{this.data.0.name}}">{{this.data.0.name}}</div>
					{{else}}
					<div class="no-data" data-localize="common.bar.no-data"></div>
					{{/if}}
				</div>
			</div>
			{{/each}}
		</div>
		{{/if}}
        </div>
	</script>
    
    <script id="dashboard-template" type="text/x-handlebars-template">
		<div class="widget">
			<div class="widget-header">
				<div class="title" style="letter-spacing:-1px; font-size:19px; margin-top:10px; margin-left:5px;">{{toUpperCase page-title}}</div>
				{{> date-selector }}
			</div>
			<div class="widget-content" style="border:none;">
                {{#if usage}}
				<div id="big-numbers-container" class="dashboard">
					{{#each usage}}
					<div class="big-numbers top {{#if ../../usage-class}}{{../../usage-class}}{{else}}six-column{{/if}} help-zone-vs" data-help-localize="help.{{this.help}}">
						<div class="inner">
                            <div class="logo {{#if this.ion-icon}} ion {{this.ion-icon}} {{/if}} {{#if this.material-icon}} material {{/if}}">
                                {{#if this.material-icon}}
                                <i class="material-icons">{{this.material-icon}}</i>
                                {{/if}}
                            </div>
							<div class="number">
                                <span class="value">{{getShortNumber this.data.total}}</span>
                                {{#if this.data.isEstimate}}
                                    <span id="total-user-estimate-ind"><i class="fa fa-asterisk"></i></span>
                                    <div id="total-user-estimate-exp" style="display:none;">
                                        <div style="line-height:20px;">
                                            Total (unique) user count for this period is estimated and corrected using the biggest time buckets from available daily, weekly and monthly stats.<br/><br/>
                                            Exact total user counts are available for this year, month and day.
                                        </div>
                                    </div>
                                {{/if}}
                            </div>
                            <div class="title">{{this.title}}</div>
                            <div class="trend {{this.data.trend}}">
                                {{#ifCond this.data.change "==" "NA"}}
                                <i class="material-icons">trending_flat</i>
                                {{else}}
                                {{#ifCond this.data.change "==" "0%"}}
                                <i class="material-icons">trending_flat</i>
                                {{else}}
                                    {{#ifCond this.data.trend "==" "u"}}
                                        <i class="material-icons">trending_up</i>
                                    {{else}}
                                        <i class="material-icons">trending_down</i>
                                    {{/ifCond}}
                                {{/ifCond}}
                                {{/ifCond}}
                                <div class="change">{{this.data.change}}</div>
                            </div>
							<div class="spark"><span class="{{this.data.trend}}sparkline">{{this.data.sparkline}}</span></div>
                            <div class="select" id="{{this.id}}"></div>
						</div>
					</div>
					{{/each}}
				</div>
                {{/if}}
			</div>
			<div class="widget-footer" style="height:220px; padding-top:20px; padding-bottom:10px; overflow:visible; box-shadow:none; position:relative;">
                <div id="graph-note">
                    <div class="main">
                        Notes
                        <div class="tail"></div>
                    </div>
                </div>
				<div id="dashboard-graph" class="graph" style="height:100%; margin-left:-10px;"></div>
			</div>
		</div>
		<div class="dashboard-summary">
			{{#each bars}}
			<div class="item help-zone-vs" data-help-localize="help.{{this.help}}">
				<div class="inner">
					<div class="title">{{this.title}}</div>
					{{#if this.data}}
					<div class="bar">
						{{#each this.data}}
							<div class="bar-inner" style="width:{{this.percent}}%;" data-item="{{this.name}}"></div>
						{{/each}}
					</div>
					<div class="number" data-item="{{this.data.0.name}}">{{this.data.0.name}}</div>
					{{else}}
					<div class="no-data" data-localize="common.bar.no-data"></div>
					{{/if}}
				</div>
			</div>
			{{/each}}
		</div>
		<div class="widget map-list geo-switch help-zone-vb" data-help-localize="help.dashboard.map">
            <div class="data-type-selector-group">
                <div id="map-list-sessions" class="selector big-numbers top cly-grid-3 active">
                    <div class="inner">
                        <div class="select">
                            <div class="title" data-localize="sidebar.analytics.sessions"></div>
                        </div>
                    </div>
                </div>
                <div id="map-list-users" class="selector big-numbers top cly-grid-3">
                    <div class="inner">
                        <div class="select">
                            <div class="title" data-localize="sidebar.analytics.users"></div>
                        </div>
                    </div>
                </div>
                <div id="map-list-new" class="selector big-numbers top cly-grid-3">
                    <div class="inner">
                        <div class="select">
                            <div class="title" data-localize="common.table.new-users"></div>
                        </div>
                    </div>
                </div>
            </div>
			<div id="geo-chart-outer"><div id="geo-chart"></div></div>
            <div id="map-list-right"></div>
		</div>
	</script>

    <script id="table-template" type="text/x-handlebars-template">
        <div class="widget">
            <div class="widget-header">
                <div class="left">
                    <div style="overflow: auto">
                        {{#if filter1}}
                        <div class="title small">{{page-title}}</div>
                        {{else}}
                        <div class="title">{{page-title}}</div>
                        {{/if}}
                    </div>
                    {{#if filter1}}
                    <div style="width:300px; display: block;">
                    <div class="cly-select float filter1-segmentation">
                        <div class="select-inner">
                            <div class="text-container">
                                <div class="text">{{active-filter1}}</div>
                            </div>
                            <div class="right combo"></div>
                        </div>
                        <div class="select-items square" style="width:220px;">
                            <div>
                                {{#eachOfObject filter1}}
                                <div data-value="{{property}}" class="segmentation-option item">{{value}}</div>
                                {{/eachOfObject}}
                            </div>
                        </div>
                    </div>
                    {{#if filter2}}
                    <div class="cly-select float filter2-segmentation">
                        <div class="select-inner">
                            <div class="text-container">
                                <div class="text">{{active-filter2}}</div>
                            </div>
                            <div class="right combo"></div>
                        </div>
                        <div class="select-items square" style="width:220px;">
                            <div>
                                {{#eachOfObject filter2}}
                                <div data-value="{{property}}" class="segmentation-option item">{{value}}</div>
                                {{/eachOfObject}}
                            </div>
                        </div>
                    </div>
                    {{/if}}
                    </div>
                    {{/if}}
                </div>
                {{> date-selector }}
            </div>
        </div>
        <div class="data-table table-template" data-help-localize="help.{{{chart-helper}}}">
            <table id="data-table" class="d-table help-zone-vb no-fix" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
        </div>
    </script>

    <% if (use_google) { %>
	<script language="javascript" type="text/javascript" src="https://www.google.com/jsapi"></script>
    <% } %>

    <% if (production) { %>
	    <!-- PRODUCTION -->
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/min/countly.visualization.js?<%= countlyVersion %>"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.config.js?<%= countlyVersion %>"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/min/countly.lib.js?<%= countlyVersion %>"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/min/countly.plugins.js?<%= countlyVersion %>"></script>
    <% } else { %>
	    <!-- DEVELOPMENT -->
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/textcounter.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/jquery.peity.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.tickrotor.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.pie.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.resize.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.stack.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.spline.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.crosshair.js"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/flot/jquery.flot.orderBars.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/gauge.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/d3/d3.min.js"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/visualization/rickshaw/rickshaw.min.js"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.common.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.config.js?<%= countlyVersion %>"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.helpers.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.event.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.session.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.city.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.location.js?<%= countlyVersion %>"></script>
	    <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.map.helper.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.device.list.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.device.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.device.detail.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.app.version.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.carrier.js?<%= countlyVersion %>"></script>
        <script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.total.users.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.task.manager.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.template.js?<%= countlyVersion %>"></script>
		<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/countly/countly.views.js?<%= countlyVersion %>"></script>
		<% if (javascripts) { %>
			<% for(var i=0, l=javascripts.length; i<l; i++) {%>
				<script language="javascript" type="text/javascript" src="<%- cdn %><%= javascripts[i] %>?<%= countlyVersion %>"></script>
			<% } %>
		<% } %>
	<% } %>

    <% if (themeFiles && themeFiles.js) { %>
        <% for(var i=0, l=themeFiles.js.length; i<l; i++) {%>
    		<script language="javascript" type="text/javascript" src="<%=themeFiles.js[i]%>"></script>
        <% } %>
    <% } %>

	<script>Backbone.history.start();</script>

	<% if (!track || track == "GA" && member['global_admin'] || track == "noneGA" && !member['global_admin']) { %>
		<!--Countly script-->
		<script type='text/javascript' src='<%- cdn %>sdk/web/countly.min.js'></script>
		<script type='text/javascript'>

		//initializing countly with params
		Countly.init({
			app_key: "386012020c7bf7fcb2f1edf215f1801d6146913f",
			url: "https://stats.count.ly/",
			device_id: countlyGlobal["member"]["email"],
			app_version: "<%= countlyVersion %>",
			interval:1000
		});

		//track sessions automatically
		Countly.track_sessions();

		//track pageviews automatically
		Countly.track_pageview(window.location.pathname+window.location.hash);

		$(window).on('hashchange', function() {
			Countly.track_pageview(window.location.pathname+window.location.hash);
		});

		//track any clicks to webpages automatically
		Countly.track_clicks();

		//track javascript errors
		Countly.track_errors();

		Countly.user_details({
			"name": countlyGlobal["member"]["full_name"] || "",
			"username": countlyGlobal["member"]["username"] || "",
			"email": countlyGlobal["member"]["email"]
		 });

		 Countly.userData.set("lastServer", window.location.hostname);
		 Countly.userData.set("lastVersion", "<%= countlyVersion %>");
		 Countly.userData.set("lastEdition", "<%= countlyTypeTrack %>");
		 Countly.userData.set("isTrial", <%= countlyTrial %>);
		 Countly.userData.set("cpus", <%= cpus %>);
		 Countly.userData.push_unique("servers", window.location.hostname);
		 Countly.userData.push_unique("versions", "<%= countlyVersion %>");
		 Countly.userData.push_unique("editions", "<%= countlyTypeTrack %>");
		 Countly.userData.save();

		 <% if (installed) { %>
		 Countly.add_event({
			key:"INSTALL"
		  });
		 <% } %>
		</script>
	<% } %>

	<% if(intercom && member['global_admin'] || config.autonomous) { %>
	<script>
		$(document).ready(function() {
			$(".activate_intercom").on("click", function() {
                Intercom('show');
        	});
			$('.list .item_info').on("click", function(e){
				e.stopPropagation();
			});
			
        });
	</script>
    <script id="IntercomSettingsScriptTag">
        var intercomSettings = {
            app_id: 'pt60eheo',
            widget: {
                activator: '.activate_intercom'
            },
            email: "<%= member.email %>",
            created_at: parseInt("<%= member.created_at %>") || 1349863810,
            name: "<%= member.full_name %>",
            user_id: "<%= member.in_user_id %>",
            user_hash: "<%= member.in_user_hash %>",
            trial_user: <%= countlyTrial %>
        };
    </script>
    <script>
        (function() {
            var i=function(){i.c(arguments)};i.q=[];
            i.c=function(args){i.q.push(args)};window.Intercom=i;
            function async_load() {
                var s = document.createElement('script');
                s.type = 'text/javascript'; s.async = true;
                s.src = 'https://api.intercom.io/api/js/library.js';
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            }
            if (window.attachEvent) {
                window.attachEvent('onload', async_load);
            } else {
                window.addEventListener('load', async_load, false);
            }
        })();
    </script>
	<% } %>
</body>
</html>
